<template>
  <div>
    <div class="search_header">
        <div class="search_left" @click="$router.push('/citylist')">
            <div class="city">上海</div>
        </div>
        <van-search
            class='header_search'
            v-model="search_value"
            placeholder="请输入小区或者地址"
            background=rgba(0,0,0,0)
        />
        <div class="search_right" @click="$router.push('/map')">
            <van-icon name="location-o" class="search_right_ico" />
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchNb',
  data () {
    return {
      search_value: ''
    }
  },
  methods: {}
}
</script>

<style scoped lang='less'>
.search_header{
    width:375px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-content: center;
    margin-left:5px;
}
.search_left{
    position: relative;
    width: 50px;
    height: 34px;
    background-color: white;
    .city{
        // text-align: center;
        padding-left: 2px;
        line-height: 34px;
    }
    .city::before{
        position: absolute;
        right: 4px;
        top:14px;
        content: '';
        width: 0;
        height: 0;
        border-left: 3.5px solid transparent;
        border-right: 3.5px solid transparent;
        border-bottom: 6px solid rgb(120, 120, 120);
        transform: rotate(180deg);
    }
}
.header_search{
    width:245px;
    height: 34px;
    padding-left: 0px;
    padding-right: 0px;
}
.search_right{
    width: 50px;
    height: 34px;
    // background-color: yellow;
    display: flex;
    justify-content: center;
    align-content: center;
    .search_right_ico{
        zoom:2;
        color:white;
    }
}
</style>
